//定义数据
var hospitalMsg = [
	{
		'hospitalName' : 'A医院' , 
		'total' : '320' , 
		'sectionMsg' : [
			{'sectionName' : '妇产科' , 'sectionTotal' : '25'},
			{'sectionName' : '儿科' , 'sectionTotal' : '45'},
			{'sectionName' : '骨伤科' , 'sectionTotal' : '30'},
			{'sectionName' : '耳鼻喉科' , 'sectionTotal' : '40'},
			{'sectionName' : '心外科' , 'sectionTotal' : '55'},
			{'sectionName' : '烧伤科' , 'sectionTotal' : '65'},
			{'sectionName' : '呼吸内科' , 'sectionTotal' : '40'}			
		]
	},
	{
		'hospitalName' : 'B医院' , 
		'total' : '220' , 
		'sectionMsg' : [
			{'sectionName' : '妇产科' , 'sectionTotal' : '15'},
			{'sectionName' : '儿科' , 'sectionTotal' : '20'},
			{'sectionName' : '骨伤科' , 'sectionTotal' : '25'},
			{'sectionName' : '耳鼻喉科' , 'sectionTotal' : '30'},
			{'sectionName' : '心外科' , 'sectionTotal' : '10'},
			{'sectionName' : '烧伤科' , 'sectionTotal' : '13'},
			{'sectionName' : '呼吸内科' , 'sectionTotal' : '15'}			
		]
	},
	{
		'hospitalName' : 'C医院' , 
		'total' : '120' , 
		'sectionMsg' : [
			{'sectionName' : '妇产科' , 'sectionTotal' : '9'},
			{'sectionName' : '儿科' , 'sectionTotal' : '12'},
			{'sectionName' : '骨伤科' , 'sectionTotal' : '11'},
			{'sectionName' : '耳鼻喉科' , 'sectionTotal' : '16'},
			{'sectionName' : '心外科' , 'sectionTotal' : '17'},
			{'sectionName' : '烧伤科' , 'sectionTotal' : '14'},
			{'sectionName' : '呼吸内科' , 'sectionTotal' : '20'}			
		]
	},
	{
		'hospitalName' : 'D医院' , 
		'total' : '90' , 
		'sectionMsg' : [
			{'sectionName' : '妇产科' , 'sectionTotal' : '11'},
			{'sectionName' : '儿科' , 'sectionTotal' : '14'},
			{'sectionName' : '骨伤科' , 'sectionTotal' : '16'},
			{'sectionName' : '耳鼻喉科' , 'sectionTotal' : '8'},
			{'sectionName' : '心外科' , 'sectionTotal' : '23'},
			{'sectionName' : '烧伤科' , 'sectionTotal' : '13'},
			{'sectionName' : '呼吸内科' , 'sectionTotal' : '17'}			
		]
	}
];

var opData1 = [];
var opData2 = [];
var legendData1 = [];
var legendData2 = [];
var text2 = '';

//得到第一个图表的数据
for(var i = 0 ; i < hospitalMsg.length ; i++){		
	//获取chart1图例名称
	legendData1.push(hospitalMsg[i].hospitalName); 
	//获取chart1显示数据
	opData1.push({
		value : hospitalMsg[i].total,
        name : hospitalMsg[i].hospitalName
	});
};
//页面加载成功后,第二个图表默认显示为第一条的数据内容
for(var j = 0 ; j < hospitalMsg[0].sectionMsg.length; j++){
	text2 = hospitalMsg[0].hospitalName;
	legendData2.push(hospitalMsg[0].sectionMsg[j].sectionName);
	opData2.push({
		value : hospitalMsg[0].sectionMsg[j].sectionTotal,
    	name : hospitalMsg[0].sectionMsg[j].sectionName
	});
};

$(function(){
	var c1 = echarts.init(document.getElementById("chart1"));
	var c2 = echarts.init(document.getElementById("chart2"));
	
	function drawChart1(legendData , seriesData){
	  var option1 = {
		    title : {
		        text: '各医院医护人员总数',
		        subtext: '纯属虚构',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: legendData1
		    },
		    series : [
		        {
		            name: '医院数据',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:seriesData,
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
		c1.setOption(option1 , true);
		c1.on('click',function(params){
			console.log(params);
			var index = params.dataIndex;
			opData2 = [];
			for(var k = 0 ; k < hospitalMsg[index].sectionMsg.length ; k++){
				text2 = hospitalMsg[index].hospitalName;
				opData2.push({
					value : hospitalMsg[index].sectionMsg[k].sectionTotal,
		        	name : hospitalMsg[index].sectionMsg[k].sectionName
				});
			}		
//			option2.series[0].data = opData2;		
			drawChart2(legendData2 , opData2);
		});	
	}
	
	function drawChart2(legendData , seriesData){
		var option2 = {
		    title : {
		        text: text2 + '各科室医护人员总数',
		        subtext: '纯属虚构',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: legendData
		    },
		    series : [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:seriesData,
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
		c2.setOption(option2 , true);
	}
	
	drawChart1(legendData1 , opData1);
	drawChart2(legendData2 , opData2);
});




